<template>
  <div class="container">
    <h2 style="font-size: 1.2em;">行政部</h2>
    <!-- <router-link to="/">返回</router-link> -->
    <a class="" href="http://192.168.110.138">返回</a>
    <div class="button-container">
      <button class="my-button">
        <router-link to="/">职位说明</router-link>
      </button>
      <button class="my-button">
        <router-link to="/Fss">宿舍管理</router-link>

      </button>
      <button class="my-button">后勤管理</button>
      <button class="my-button">
        <router-link to="/main/xingzheng/gudingzichan">固定资产</router-link>
      </button>
      <button class="my-button">公司公告</button>
      <button class="my-button">ISO文件</button>
      <button class="my-button">办公</button>
      <button class="my-button">网管</button>
      <button class="my-button">培训管理</button>
      <button class="my-button">公司信息</button>
      <button class="my-button">按钮 11</button>
      <button class="my-button">按钮 12</button>
    </div>
  </div>
</template>

<style scoped>
* {
  font-family: '宋体';
  /* font-size: 18px; */
  background-color: antiquewhite;
}

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 449px;
  padding: 100px 0px;
}

.button-container {
  display: grid;
  /* 使用 CSS Grid 布局 */
  grid-template-columns: repeat(4, 1fr);
  /* 确定为 4 列 */
  gap: 10px;
  /* 按钮间距 */
  margin-top: 30px;
  width: 60%;
  justify-items: center;
}

.my-button {
  padding: 10px 2px;
  /* 按钮内边距 */
  font-size: 16px;
  /* 字体大小 */
  cursor: pointer;
  /* 鼠标指针 */
  border: 1px solid #ccc;
  /* 边框 */
  /* border-radius: 5px; */
  /* 圆角 */
  transition: background-color 0.3s;
  /* 背景色过渡效果 */
  width: 120px;
  white-space: nowrap;
  /* //禁止换行 */
}

.my-button:hover {
  background-color: #eff4fccf;
  /* 悬停时改变背景色 */
}
</style>